<!--  @author:ymy  -->
<template>
  <div class="bosses" @scroll="scrollEvent">
    <van-tabs title-inactive-color="#a5a5a5" title-active-color="#0395e4" v-model="activeName">
      <van-tab @click="curPage = 1" title="大咖直播" name="a">
        <Blive :course="course" :live="live" />
      </van-tab>
      <van-tab @click="curPage = 1" title="大咖专访" name="b">
        <Interview :interviewData="interviewData" />
      </van-tab>
      <van-tab @click="curPage = 1" title="热门大咖" name="c">
        <Hot :hots="hots" />
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import Blive from './Blive';
import Hot from './Hot';
import Interview from './Interview';
export default {
  name: 'Bosses',
  data() {
    return {
      activeName: 'a',
      course: [],
      live: [],
      interviewData: [],
      curPage: 1,
      hots: [],
    };
  },
  components: {
    Blive,
    Hot,
    Interview,
  },
  async created() {
    const { course, live } = await this.axiosRq(
      '/lqb/api/daniu?link=paging&live=3&heat=N&page=1&is_live=1',
      'GET'
    );
    const data1 = await this.axiosRq('/lqb/api/daniu/interview?link=paging&page=1', 'GET');
    const data2 = await this.axiosRq('/lqb/api/daniu/lists?link=paging&page=1', 'GET');
    this.hots = data2.data;
    this.interviewData = data1.data;
    this.course = course.data;
    this.live = live;
  },
  methods: {
    scrollEvent(e) {
      const st = e.target.scrollTop;
      const totalHeight = e.target.scrollHeight;
      const clientHeight = e.target.clientHeight;
      if (st + clientHeight >= totalHeight) {
        this.curPage++;
        if (this.activeName == 'a') {
          this.loadMoreGet(`/lqb/api/daniu?link=paging&live=3&heat=N&page=${this.curPage}`).then(
            ({ course }) => {
              this.course = this.course.concat(course.data);
            }
          );
        } else if (this.activeName == 'b') {
          this.loadMoreGet(`/lqb/api/daniu/interview?link=paging&page=${this.curPage}`).then(
            ({ data }) => {
              this.interviewData = this.interviewData.concat(data);
            }
          );
        } else if (this.activeName == 'c') {
          this.loadMoreGet(`/lqb/api/daniu/lists?link=paging&page=${this.curPage}`).then(
            ({ data }) => {
              this.hots = this.hots.concat(data);
            }
          );
        }
      }
    },
    async loadMoreGet(url) {
      const response = await this.axiosRq(url, 'GET');
      return response;
    },
  },
};
</script>

<style lang="less" scoped>
html {
  overflow: hidden;
}
.bosses {
  margin-top: 0.44rem;
  font-size: 0.2rem;
  background-color: #f4f4f4;
  margin-bottom: 0.5rem;
  overflow: auto;
  height: 5.73rem;
}
</style>
